<template>
  <div>
    <el-dialog  lock-scroll show-close title="选择链接" :close-on-click-modal="false"
      :data="categoryData" @open="onOpen()" width="860" :visible.sync="dialogVisible" :append-to-body="true">
      <div class="table_box">
        <div class="left_box">
          <el-tree :data="categoryData" :props="defaultProps" :current-node-key="1" :highlight-current="true"
            node-key="id" @node-click="handleNodeClick"></el-tree>
        </div>
        <!-- 第三方链接 -->
        <div class="right_box" v-if="currenType == 'custom'">
          <div style="width: 440px; margin: 50px 0 0 0">
            <el-form ref="customDate" :model="customDate" label-width="100px">
              <el-form-item label="第三方链接：" prop="url">
                <el-input v-model.trim="customDate.url" placeholder="请输入第三方链接" />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 我的首页 -->
        <div class="right_box" v-if="currenType == 'wodeshouye'">
          <div v-if="wodeshouye.length">
            <div class="cont">我的页面</div>
            <div class="Box">
              <div class="cont_box" :class="currenUrl == item.path ? 'on' : ''" v-for="(item, index) in wodeshouye"
                :key="index" @click="getUrl(item)">
                {{ item.style.navigationBarTitleText }}
              </div>
            </div>
          </div>
        </div>
        <!-- 传参页面 -->
        <div class="right_box" v-if="currenType == 'idParams'">
          <div v-if="idParams.length">
            <div class="cont">传参页面</div>
            <div class="Box">
              <div class="cont_box" v-for="(item, index) in idParams" :key="index" @click="getUrl(item)"
                :class="currenUrl == item.path && item.type != 'twoColumn' ? 'on' : ''">

                <el-dropdown @command="(command) => handleCommand(command, item)" v-if="item.type == 'twoColumn'"
                  trigger="click">
                  <span class="el-dropdown-link">
                    <span>{{ threeCol }}</span><i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="more">更多影片</el-dropdown-item>
                    <el-dropdown-item command="collect">收藏记录</el-dropdown-item>
                    <el-dropdown-item command="history">历史记录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span v-else> {{ item.style.navigationBarTitleText }}</span>
              </div>
              <div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import listData from './list.json'; // 左侧树形菜单数据
import idParamsData from './idParams.json';
import shouyedata from './wodeshouye.json';

export default {
  name: 'linkaddress',
  data() {
    return {
      threeCol: '更多影片/历史记录/收藏记录',
      command: '',
      constants: this.$constants,
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'title',
      },
      idParams: [], // 
      wodeshouye: [], // 我的首页
      lodingList: false,
      currenType: 'wodeshouye',
      currenId: '',
      currenUrl: '',
      formValidate: {
        page: 1,
        limit: 10,
        keywords: '',
        type: 1,
      },
      customDate: {
        url: '',
      },
      radioData: '',
      linkId: 0,
      tableList: {},
      params: {
        page: 1,
        limit: 10,
        keywords: '',
        type: 1,
        name: '',
      },
      // columns: [
      //   { title: 'ID', key: 'id', width: 60 },
      //   { title: '页面名称', key: 'name', width: 150 },
      //   { title: '页面链接', key: 'url' },
      // ],
      // columns7: [
      //   { title: 'ID', key: 'id', width: 60 },
      //   { title: '分类名称', key: 'cate_name', tree: true },
      //   { title: '分类图标', slot: 'pic' },
      // ],
      // columns8: [
      //   { title: 'ID', key: 'id', width: 60 },
      //   { title: '商品图片', slot: 'image', width: 90 },
      //   { title: '商品名称', key: 'store_name' },
      // ],
      // bargain: [
      //   { title: 'ID', key: 'id', width: 60 },
      //   { title: '商品图片', slot: 'image', width: 90 },
      //   { title: '商品名称', key: 'title' },
      // ],
      // news: [
      //   { title: 'ID', key: 'id', width: 60 },
      //   { title: '文章图片', slot: 'image_input', width: 90 },
      //   { title: '文章名称', key: 'title' },
      // ],
    };
  },
  props: {
    //使用组件的页面
    fromType: {
      type: String,
      default: '',
    },
  },
  computed: {
    // 左侧树形菜单数据
    categoryData() {
      return [...listData.data];
    },
  },
  methods: {
    handleCommand(command, item) {
      this.command = command
      this.currenUrl = item.path + '?type=' + this.command;
      switch (command) {
        case 'more':
          this.threeCol = '更多影片'
          break;
        case 'collect':
          this.threeCol = '收藏记录'
          break;
        case 'history':
          this.threeCol = '历史记录'
          break;
      }
    },
    //关闭弹窗
    onOpen() {
      this.currenId = '';
      this.mockData('wodeshouye');
    },
    handleSearch() {
      this.params = this.formValidate;
      this.mockData('product');
    },
    handleNodeClick(data) {
      this.customDate.url = ''
      this.params.page = 1;
      this.tableList.list = [];
      this.linkId = null;
      this.radioData = null;
      this.$set(this, 'currenType', data.type);
      this.mockData(data.type);
    },
    mockData(type) {
      let data = [];
      if (type == 'wodeshouye') {
        data = shouyedata.pages;
      } else if (type == 'idParams') {
        data = idParamsData.pages;
      }
      let wodeshouye = [];
      let idParams = [];
      data.forEach((e) => {
        if (type == 'wodeshouye') {
          wodeshouye.push(e);
        } else if (type == 'idParams') {
          idParams.push(e);
        }
      });

      this.wodeshouye = wodeshouye;
      this.idParams = idParams;
    },
    getUrl(item) {
      this.currenId = item.id;
      console.log('data', item);
      if (item && item.type == 'twoColumn') {
        this.currenUrl = item.path + '?type=' + this.command;
      } else {
        this.currenUrl = item.path;
      }
    },
    singleElection(row) {
      this.linkId = row.id;
    },
    handleSubmit(name) {
      if (!this.currenUrl && !this.customDate.url) {
        this.$message.error('请先选择或者自定义链接');
        return
      }
      switch (this.currenType) {
        case 'custom':
          this.$emit('linkUrl', `${this.customDate.url}`);
          break;
        case 'idParams':
          this.$emit('linkUrl', `/${this.currenUrl}`);
          break;
        case 'wodeshouye':
          this.$emit('linkUrl', `/${this.currenUrl}`);
          break;
      }
      this.dialogVisible = false;
      this.currenId = '';
      this.currenType = 'wodeshouye';
    },
    handleSizeChange(val) {
      this.params.limit = val;
      this.radioData = null;
      this.mockData(this.currenType);
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.radioData = null;
      this.mockData(this.currenType);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  width: 860px !important;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px #ddd;
}

::-webkit-scrollbar {
  width: 4px !important;
  /*对垂直流动条有效*/
}

.on {
  background-color: #2d8cf0 !important;
  color: #fff !important;
}

.menu-item {
  position: relative;

  display flex justify-content space-between word-break break-all .icon-box {
    z-index: 3 position absolute right 20px top 50% transform translateY(-50%) display none;
  }

  &:hover .icon-box {
    display: block;
  }

  .right-menu {
    z-index: 10;
    position: absolute;
    right: -106px;
    top: -11px;
    width: auto;
    min-width: 121px;
  }
}

.table_box {
  margin-top: 14px;
  display: flex;
  position: relative;

  .left_box {
    width: 160px;
    height: 470px;
    border-right: 1px solid #eeeeee;
    overflow-x: hidden;
    overflow-y: auto;

    .left_cont {
      margin-bottom: 12px;
      cursor: pointer;
    }
  }

  .right_box {
    margin-left: 23px;
    font-size: 13px;
    font-family: PingFang SC;
    width: 645px;
    height: 470px;
    overflow-x: hidden;
    overflow-y: auto;

    .cont {
      font-weight: 500;
      color: #000000;
      font-weight: bold;
    }

    .Box {
      margin-top: 19px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      .cont_box {
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        background: #fafafa;
        border-radius: 3px;
        text-align: center;
        padding: 7px 30px;
        margin-right: 10px;
        margin-bottom: 18px;
        cursor: pointer;

        &:hover {
          background-color: #eee;
          color: #333;
        }
      }

      .item {
        position: relative;

        .iconfont {
          display: none;
        }

        &:hover {
          .iconfont {
            display: block;
          }
        }
      }

      .iconfont {
        position: absolute;
        right: 9px;
        top: -8px;
        font-size: 18px;
        color: #333;
      }
    }
  }

  .Button {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-family: PingFangSC-Regular;

    text-align center .cancel {
      width: 70px;
      height: 32px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
      border-radius: 2px;
      font-size: 14px;
      color: #000000;
      line-height: 32px;
      float: left;
      margin-right: 10px;
      cursor: pointer;
    }

    .ok {
      width: 70px;
      height: 32px;
      background: var(--prev-color-primary);
      border-radius: 2px;
      font-size: 14px;
      color: #ffffff;
      line-height: 32px;
      float: left;
      cursor: pointer;
    }
  }
}

::v-deep .el-tree-node:focus>.el-tree-node__content {
  color: #409eff; //节点的字体颜色
}
</style>
